import { CSSProperties } from 'react';

/**
 * 主题配置对象
 * 定义了整个应用的颜色、间距、排版、圆角和阴影等样式
 */
export const theme = {
  // 颜色系统
  colors: {
    primary: '#4a90e2',    // 主要颜色，用于主要按钮和重要文本
    secondary: '#f5a623',  // 次要颜色，用于次要按钮和强调
    success: '#7ed321',    // 成功状态颜色
    danger: '#d0021b',     // 危险状态颜色
    background: '#f5f5f5', // 背景色
    text: '#333333',       // 文本颜色
    white: '#ffffff'       // 白色
  },
  // 间距系统
  spacing: {
    xs: '4px',   // 超小间距
    sm: '8px',   // 小间距
    md: '16px',  // 中等间距
    lg: '24px',  // 大间距
    xl: '32px'   // 超大间距
  },
  // 排版系统
  typography: {
    h1: {
      fontSize: '2.5rem',
      fontWeight: 'bold',
      marginBottom: '1rem'
    },
    h2: {
      fontSize: '2rem',
      fontWeight: 'bold',
      marginBottom: '0.75rem'
    },
    body: {
      fontSize: '1rem',
      lineHeight: '1.5'
    }
  },
  // 圆角系统
  borderRadius: {
    sm: '4px',   // 小圆角
    md: '8px',   // 中等圆角
    lg: '16px'   // 大圆角
  },
  // 阴影系统
  shadows: {
    sm: '0 2px 4px rgba(0, 0, 0, 0.1)',    // 小阴影
    md: '0 4px 8px rgba(0, 0, 0, 0.1)',    // 中等阴影
    lg: '0 8px 16px rgba(0, 0, 0, 0.1)'    // 大阴影
  }
};

/**
 * 按钮样式配置
 * 定义了主要和次要按钮的样式
 */
export const buttonStyles = {
  // 主要按钮样式
  primary: {
    backgroundColor: theme.colors.primary,
    color: theme.colors.white,
    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
    borderRadius: theme.borderRadius.md,
    border: 'none',
    cursor: 'pointer',
    fontSize: '1rem',
    transition: 'all 0.2s ease',
    '&:hover': {
      backgroundColor: '#357abd'  // 悬停时的颜色
    }
  } as CSSProperties,
  // 次要按钮样式
  secondary: {
    backgroundColor: theme.colors.secondary,
    color: theme.colors.white,
    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
    borderRadius: theme.borderRadius.md,
    border: 'none',
    cursor: 'pointer',
    fontSize: '1rem',
    transition: 'all 0.2s ease',
    '&:hover': {
      backgroundColor: '#e09600'  // 悬停时的颜色
    }
  } as CSSProperties
};

/**
 * 容器样式配置
 * 定义了页面和卡片的布局样式
 */
export const containerStyles = {
  // 页面容器样式
  page: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: '100vh',
    padding: theme.spacing.lg,
    backgroundColor: theme.colors.background
  } as CSSProperties,
  // 卡片容器样式
  card: {
    backgroundColor: theme.colors.white,
    borderRadius: theme.borderRadius.lg,
    padding: theme.spacing.xl,
    boxShadow: theme.shadows.md,
    width: '100%',
    maxWidth: '800px'
  } as CSSProperties
}; 